<template>
	<view>
		<!-- 搜索 -->
		<view class="white">
			<view class="search common" @tap="click">
				<template>
					<u-search placeholder="请输入搜索关键词" v-model="keyword" :clearabled="true" :show-action="false"></u-search>
				</template>
			</view>
		</view>
		<view>
			<view :class="[color, 'bg2']">
				<view class="white">
					<view class="search common">
						<u-search
							action-text="取消"
							v-model="keyword2"
							@input="inp"
							placeholder-color="#bbb"
							:placeholder="defaultKeyword.keyword"
							:clearabled="true"
							show-action
						></u-search>
						<view class="postxt" @tap="none"></view>
					</view>
					<view class="" v-if="!isShowsearch">
						<view class="hot" style="position: relative;">
							<view class="">历史记录</view>
							<view class="txt2">
								<text :class="['text']" v-for="(item, index) in historyKeywordList" :key="index" @tap="pushSearch(item)">{{ item }}</text>
							</view>
							<view class="" style="position: absolute;right: 40rpx;top: 10rpx;"><u-icon name="trash-fill" color="#999" size="20" @tap="clear"></u-icon></view>
						</view>
						<view class="hot">
							<view class="">热门搜索</view>
							<view class="txt2">
								<text :class="[index == 0 ? 'red' : '', 'text']" v-for="(item, index) in hotKeywordList" :key="index" @tap="pushSearch(item.keyword)">
									{{ item.keyword }}
								</text>
							</view>
						</view>
					</view>

					<!-- 定位 -->
					<view v-if="isShowsearch">
						<view class="posblack">
							<view class="item" v-for="(item, index) in list" :key="index" @tap="pushSearch(item)">
								<text>{{ item }}</text>
							</view>
						</view>
						<view class="nomore">没有更多了</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 布局 -->
		<view class="classify">
			<view class="fen-left">
				<a @tap="qiehuan(index, item.id)" v-for="(item, index) in leftshu" :key="index" :class="[index == active ? 'fen-item active' : 'fen-item']">
					<view class="fen-item_text">{{ item.name }}</view>
				</a>
			</view>

			<view class="fen-right">
				<view class="box">
					<image :src="rightshu.wap_banner_url"></image>
					<h5>{{ rightshu.front_desc }}</h5>
				</view>
				<view class="title">
					<text></text>
					<h3>{{ rightshu.name }}</h3>
				</view>

				<view class="fenlei">
					<view class="fen-box" v-for="(item1, index1) in rightshu.subCategoryList">
						<view class="fen-juti">
							<image :src="item1.wap_banner_url"></image>
							<view>{{ item1.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view><u-loading-icon class="jiazai" :show="isShow" color="white" size="50" mode="semicircle" text="加载中..." textSize="18" :vertical="true"></u-loading-icon></view>

		<tab></tab>
	</view>
</template>

<script>
import tab from '@/custom-tab-bar/index.vue';
import mysearch from '../../components/mysearch/mysearch.vue';
import { categoryApi } from '../../utils/api.js';
import { ApiIndex, searchApi, goodsApi2, clearhistoryApi, helperApi } from '../../utils/api.js';
import { catalogApi } from '../../utils/api.js';
import { mapMutations } from 'vuex';
export default {
	components: {
		tab,
		mysearch
	},
	data() {
		return {
			color2: '',
			tranbg: 'black',
			keyword: '',
			color: 'trans',
			leftshu: [],
			active: 0,
			flid: 1005000,
			rightshu: [],
			isShow: false,

			isShowsearch: false,
			list: [],
			keyword2: '',
			hotKeywordList: [],
			historyKeywordList: [],
			defaultKeyword: {
				keyword: '520元礼包抢先领'
			}
		};
	},
	methods: {
		inp() {
			if (!this.isShowsearch) {
				this.isShowsearch = true;
			}
			console.log(this.keyword2);
			// 先取消上一次 等等延迟后再请求
			clearTimeout(timer);
			timer = setTimeout(() => {
				this.getSearch();
			}, 500);
		},
		async getSearch() {
			let token = uni.getStorageSync('token');
			let res = await helperApi(token, this.keyword2);
			console.log('getSearch', res);
			this.list = res.data;
			console.log('搜索记录');
		},
		async gethistory() {
			let res = await searchApi();
			console.log(res);
			this.defaultKeyword = res.data.defaultKeyword;
			this.historyKeywordList = res.data.historyKeywordList;
			this.hotKeywordList = res.data.hotKeywordList;
		},
		async clear() {
			let token = uni.getStorageSync('token');
			console.log(token);
			let res = await clearhistoryApi(token);
			console.log(res);
			this.historyKeywordList = res.data.historyKeywordList;
		},
		pushSearch(keyword) {
			uni.navigateTo({
				url: `/pages/searchList/searchList?keyword=${keyword}`
			});
		},
		click() {
			this.color = 'zero';
			this.color2 = 'black2';
		},
		none() {
			console.log(1);
			console.log('none');
			this.color = 'trans';
			this.color2 = 'white2';
		},

		async qiehuan(i, id) {
			this.isShow = true;
			this.active = i;
			this.flid = id;
			let res1 = await catalogApi({
				id: this.flid
			});
			let { currentCategory } = res1.data;
			this.rightshu = currentCategory;
			setTimeout(() => {
				this.isShow = false;
			}, 500);
		}
	},
	async onLoad() {
		let res = await categoryApi();
		let { categoryList, currentCategory } = res.data;
		this.leftshu = categoryList;
		this.rightshu = currentCategory;
		this.isShow = true;
		setTimeout(() => {
			this.isShow = false;
		}, 500);
	},
	onShow() {
		this.$store.commit('changevalue', 2);

		this.getSearch();
		this.gethistory();
	}
};
</script>

<style scoped lang="scss">
.black2 {
	background-color: black;
	opacity: 0.8;
	transform: opacity 1s;
	position: absolute;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	top: 0;
}
.white2 {
	background-color: black;
	opacity: 0;
	transform: opacity 1s;
	position: absolute;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	top: 0;
}
.postxt {
	// background-color: #ccc;
	width: 90rpx;
	height: 70rpx;
	position: absolute;
	right: 30rpx;
	top: 30rpx;
}
.bg2 {
	width: 100vw;
	height: 100vh;
	background-color: #efefef;
	position: absolute;
	top: 0;
}
.zero {
	transform: translateX(0vw);
	transition: transform 0.8s ease-out;
	z-index: 100;
	position: absolute;
}
.trans {
	transform: translateX(100vw);
	transition: transform 0.8s ease-out;
	z-index: 1;
	position: absolute;
}
//

.white {
	background-color: #fff;

	.search {
		margin: 0rpx 20rpx 0;
		padding: 20rpx 0;
		position: relative;
		z-index: 1;
	}
	.history {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 44rpx 30rpx 24rpx;
		align-items: center;
		margin-bottom: 30rpx;
	}
}

.hot {
	background-color: #fff;
	padding: 20rpx 20rpx 50rpx;
	box-sizing: border-box;

	.txt2 {
		font-size: 30rpx;
		width: 100%;
		.red {
			color: #f40;
			border: 1px solid #f40;
		}
		text {
			border-radius: 8rpx;
			border: 1px solid #ccc;
			padding: 4rpx 10rpx;
			// height: auto !important;
			color: #aaa;
			margin-right: 20rpx;
			display: inline-block;
			margin-top: 20rpx;
		}
	}
}

// 分类布局
.classify {
	display: flex;
	justify-content: space-between;
	.fen-left {
		width: 20%;
		background-color: #f7f8fa;
		.fen-item {
			position: relative;
			font-size: 28rpx;
			box-sizing: border-box;
			line-height: 40rpx;
			display: block;
			padding: 40rpx 24rpx;
			.fen-item_text {
			}
		}
		.active {
			background-color: #fff;
		}
		.active::before {
			position: absolute;
			top: 50%;
			left: 0;
			width: 4px;
			height: 32rpx;
			-webkit-transform: translateY(-50%);
			background-color: #ee0a24;
			content: '';
		}
	}
	.fen-right {
		width: 80%;
		.box {
			position: relative;
			image {
				margin: 0 14rpx;
				width: 95%;
				height: 280rpx;
				border-radius: 5px;
				box-shadow: 0 0 6px #000;
				filter: brightness(0.5);
			}
			h5 {
				width: 100%;
				color: #fff;
				position: absolute;
				top: 48%;
				left: 0;
				z-index: 2;
				text-align: center;
			}
		}
		.title {
			width: 100%;
			height: 100rpx;
			position: relative;
			background: #fff;
			text {
				width: 50%;
				height: 4rpx;
				background-color: #ccc;
				position: absolute;
				margin: auto;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
			}
			h3 {
				width: 30%;
				height: 40px;
				background-color: #fff;
				position: absolute;
				margin: auto;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				line-height: 40px;
				text-align: center;
			}
		}

		.fenlei {
			display: flex;
			flex-wrap: wrap;
			.fen-box {
				width: 33.3333%;
				border: 2rpx solid #ebedf0;
				text-align: center;
				box-sizing: border-box;
				.fen-juti {
					padding: 32rpx 16rpx;
					image {
						width: 56rpx;
						height: 56rpx;
					}
					view {
						margin-top: 16rpx;
						color: #646566;
						font-size: 24rpx;
					}
				}
			}
		}
	}
}

.grid-text {
	font-size: 28rpx;
	color: #646566;
	padding: 16rpx 0 20rpx 0rpx;
}
.jiazai {
	background-color: #000;
	width: 260rpx;
	height: 260rpx;
	margin: auto;
	border-radius: 50rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
</style>
